<template>
  <div class="main-box">
    <div class="page-head">
      <PageHeader />
    </div>
    <div class="form-box">
      <div class="info-form-box">
        <div class="head-box">项目基本信息</div>
        <div class="basic-form-box">
          <div class="left-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目编号：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目编号"
                v-model="proCode"
              />
            </div>
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>项目名称：
            </div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目名称"
                v-model="proName"
              />
            </div>
            <div class="lable-box">项目简称：</div>
            <div class="info-box">
              <input
                type="text"
                placeholder="请输入项目简称"
                v-model="proShortName"
              />
            </div>
          </div>
          <div class="middle-box">
            <div class="lable-box">
              <i class="iconfont icon-bitianxiang"></i>当前阶段：
            </div>
            <div class="info-box">
              <el-select v-model="stage" placeholder="请选择阶段">
                <el-option
                  v-for="item in stageOption"
                  :key="item.proStage"
                  :label="item.stageName"
                  :value="item.proStage"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">销售负责人：</div>
            <div class="info-box">
              <el-select
                v-model="sale"
                filterable
                placeholder="请选择销售负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">电气负责人：</div>
            <div class="info-box">
              <el-select
                v-model="electrical"
                filterable
                placeholder="请选择电气负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right-box">
            <div class="lable-box">工程负责人：</div>
            <div class="info-box">
              <el-select
                v-model="engineering"
                filterable
                placeholder="请选择工程负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">研发负责人：</div>
            <div class="info-box">
              <el-select
                v-model="research"
                filterable
                placeholder="请选择研发负责人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="head-box">项目合同信息</div>
        <div class="contract-form-box">
          <div class="left-box">
            <div class="lable-box">合同签订人：</div>
            <div class="info-box">
              <el-select
                v-model="contract"
                filterable
                placeholder="请选择合同签订人"
              >
                <el-option
                  v-for="(item, index) in perOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.empcode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="lable-box">合同签订日期：</div>
            <div class="info-box">
              <el-date-picker v-model="date" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="right-box">
            <div class="lable-box">合同金额：</div>
            <div class="info-box">
              <input type="text" placeholder="请输入合同金额" />
            </div>
          </div>
        </div>
        <div class="head-box">附件</div>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary" class="upload-btn"
            ><i class="iconfont icon-JC_058"></i>上传附件</el-button
          >
        </el-upload>
        <div class="head-box">里程碑</div>
        <div class="milestone-form-box">
          <div class="stage-title-box">
            <div v-for="(stageItem, index) in stageOption" :key="index">
              {{ stageItem.stageName }}&ensp;<i
                class="iconfont icon-JC_058"
                @click="addStageItem(index)"
              ></i>
            </div>
          </div>
          <div class="stage-body-box">
            <div v-for="(stageItem, key) in stageData" :key="key">
              <div
                class="item"
                v-for="(item, index) in stageData[key]"
                :key="index"
              >
                <div>名称：</div>
                <input class="item-title" v-model="item.stageName" />&ensp;
                <div>时间：</div>
                <input class="item-time" v-model="item.stageTime" />&ensp;
                <i
                  class="iconfont icon-shanchu"
                  @click="delStageItem(key, index)"
                ></i>
              </div>
            </div>
          </div>
        </div>
        <div class="sub-btn-box" @click="subPrjectData">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/PageHeader.vue";

import { getEmpolyeeListApi } from "@/api/index";
export default {
  components: {
    PageHeader,
  },
  data() {
    return {
      proCode: "",
      proName: "",
      proShortName: "",
      annexData: [
        {
          id: "101",
          name: "附件一",
        },
        {
          id: "102",
          name: "附件二",
        },
        {
          id: "103",
          name: "附件三",
        },
        {
          id: "104",
          name: "附件四",
        },
        {
          id: "105",
          name: "附件五",
        },
        {
          id: "106",
          name: "附件六",
        },
        {
          id: "107",
          name: "附件七",
        },
      ],
      // 阶段源数据
      stageOption: [
        {
          proStage: "SalesResearch",
          stageName: "售前调研",
        },
        {
          proStage: "Develop",
          stageName: "研发阶段",
        },
        {
          proStage: "ElectricImplement",
          stageName: "电气实施",
        },
        {
          proStage: "Design",
          stageName: "产品设计",
        },
        {
          proStage: "DebugTogether",
          stageName: "联调阶段",
        },
        {
          proStage: "Waiting4Sign",
          stageName: "等待验收",
        },
        {
          proStage: "Finish",
          stageName: "已完成",
        },
      ],
      // 人员源数据
      stage: "",
      perOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      // 销售负责人
      sale: "",
      // 电气负责人
      electrical: "",
      // 工程负责人
      engineering: "",
      // 研发负责人
      research: "",
      // 合同负责人
      contract: "",
      // 日期
      date: "",
      // 文件列表
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      stageData: {
        SalesResearch: [],
        Develop: [],
        ElectricImplement: [],
        Design: [],
        DebugTogether: [],
        Waiting4Sign: [],
        Finish: [],
      },
    };
  },

  mounted() {
    this.getEmpolyeeList();
  },

  methods: {
    async getEmpolyeeList() {
      let res = await getEmpolyeeListApi();
      res.forEach((item, index) => {
        res[index].name = item.depname + "-" + item.empname;
      });
      this.perOptions = [...res];
    },

    // 删除附件
    deletePro() {},

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 新增里程碑的阶段
    addStageItem(num) {
      switch (num) {
        case 0:
          this.stageData.SalesResearch.push({ stageName: "", stageTime: "" });
          break;
        case 1:
          this.stageData.Develop.push({ stageName: "", stageTime: "" });
          break;
        case 2:
          this.stageData.ElectricImplement.push({
            stageName: "",
            stageTime: "",
          });
          break;
        case 3:
          this.stageData.Design.push({ stageName: "", stageTime: "" });
          break;
        case 4:
          this.stageData.DebugTogether.push({ stageName: "", stageTime: "" });
          break;
        case 5:
          this.stageData.Waiting4Sign.push({ stageName: "", stageTime: "" });
          break;
        case 6:
          this.stageData.Finish.push({ stageName: "", stageTime: "" });
          break;
      }
      console.log("里程碑阶段----->", this.stageData);
    },

    delStageItem(key, index) {
      console.log("删除操作----->", this.stageData[key].splice(index, 1));
    },

    // 提交表单
    subPrjectData() {
      if (!this.proCode && !this.proName && !this.proShortName && !this.stage) {
        this.$message.warning("请填写必填项！！");
      }
      console.log("提交表单------>");
    },
  },
};
</script>

<style lang="scss" >
.main-box {
  background: #f3f6ff;
  text-align: center;

  .form-box {
    border: 1px solid #dddcdc;
    border-radius: 10px;
    width: 80%;
    height: 87vh;
    margin-left: 10%;
    display: flex;

    .info-form-box {
      width: 100%;

      .head-box {
        /* border: 1px solid blue; */
        height: 30px;
        line-height: 30px;
        text-align: start;
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
        margin-left: 20px;
      }

      .basic-form-box {
        /* border: 1px solid blue; */
        /* height: 30px; */
        display: flex;

        .left-box,
        .middle-box,
        .right-box {
          /* height: 50px; */
          /* border: 1px solid red; */
          width: 33%;

          display: flex;
          flex-wrap: wrap;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
          }

          .lable-box {
            width: 30%;
            text-align: end;
          }

          .info-box {
            width: 65%;
            line-height: 25px;
            > input {
              width: 95%;
              height: 20px;
            }
          }
        }

        .left-box {
          /* margin: 0 6%; */
        }
      }

      .contract-form-box {
        /* border: 1px solid red; */
        display: flex;

        .left-box,
        .right-box {
          /* height: 50px; */
          /* border: 1px solid red; */
          width: 46%;

          display: flex;
          flex-wrap: wrap;
          > div {
            /* border: 1px solid blue; */
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
          }

          .lable-box {
            width: 35%;
            text-align: end;
          }

          .info-box {
            width: 60%;
            line-height: 25px;
            > input {
              width: 95%;
              height: 20px;
            }
          }
        }

        .left-box {
          /* margin: 0 6%; */
        }
      }

      .annex-box {
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;

        .pro-item-box {
          height: 30px;
          width: 32%;
          display: flex;

          .pro-id {
            height: 30px;
            width: 30px;
            /* border: 1px solid red; */
            line-height: 30px;
          }

          .pro-name-box {
            /* border: 1px solid red; */
            height: 30px;
            width: 75%;
            text-align: start;
            line-height: 30px;
          }

          .update-btn-box {
            margin-right: 8px;
            color: #2b8633;
          }
          .del-btn-box {
            color: #d11b1b;
            font-size: 12px;
          }

          .update-btn-box,
          .del-btn-box {
            /* border: 1px solid red; */
            height: 30px;
            line-height: 30px;
            width: 10%;
          }

          .update-btn-box,
          .del-btn-box:hover {
            cursor: pointer;
          }
        }
      }

      .upload-demo {
        /* border: 1px solid red; */
        width: 100%;
        text-align: start;

        .upload-btn {
          background: rgba($color: #000000, $alpha: 0);
          color: #000000;
          border: none;
        }

        > ul {
          /* border: 1px solid blue; */
          /* display: flex;
          flex-wrap: wrap;
          max-height: 50px;
          overflow: auto; */

          /* > li {
            margin: 0 5px;
            border: 1px solid green;
            width: 32%;
          } */
        }

        > ul::-webkit-scrollbar {
          width: 4px;
          height: 8px;
        }
        > ul::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          opacity: 0.2;
          background: fade(rgb(78, 182, 214), 60%);
        }
        > ul::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 0;
          background: fade(rgb(78, 182, 214), 30%);
        }
      }

      .milestone-form-box {
        border: 1px solid rgb(195, 195, 199);
        white-space: nowrap; //段落中文本不换行
        overflow-x: scroll; //设置横向滚动
        overflow-y: hidden; //禁止纵向滚动
        text-align: justify; //文字平铺
        justify-content: space-between;
        overflow-y: auto;

        .stage-title-box {
          /* width: 1000px; */
          display: flex;

          > div {
            border-right: 1px solid rgb(223, 218, 218);
            border-bottom: 1px solid rgb(223, 218, 218);
            width: 30%;
            height: 20px;
            line-height: 20px;
            flex-grow: 0; //禁止自动增长
            flex-shrink: 0; //禁止自动缩小
            text-align: center;
          }
        }

        .stage-body-box {
          /* width: 1000px; */
          display: flex;

          > div {
            border-right: 1px solid rgb(223, 218, 218);
            width: 30%;
            height: 60px;
            line-height: 20px;
            flex-grow: 0; //禁止自动增长
            flex-shrink: 0; //禁止自动缩小
            text-align: center;

            > div {
              width: 100%;
              display: flex;

              .item-title,
              .item-time {
                /* border: 1px solid green; */
                width: 49%;
                height: 20px;
              }
            }
          }
        }
      }

      .milestone-form-box::-webkit-scrollbar {
        width: 4px;
        height: 8px;
      }
      .milestone-form-box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
        background: fade(rgb(78, 182, 214), 60%);
      }
      .milestone-form-box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: fade(rgb(78, 182, 214), 30%);
      }

      .sub-btn-box {
        border: 1px solid #c7c4c4;
        width: 100px;
        height: 32px;
        line-height: 30px;
        font-size: 20px;
        margin: 2% 0 0 86%;
      }

      .sub-btn-box:hover {
        cursor: pointer;
        background: rgba($color: #f5f0f0, $alpha: 0.5);
      }
    }
  }
}
</style>